<template>
  <div class="account-container">
    <template v-if="props.gameStatus == 1">
      <div class="account-container-weapon-info">
        <template v-for="(item, index) in props.accounts" :key="index">
          <div class="account-item-split" v-if="index != 0"></div>
          <div class="account-item-type1" v-if="props.gameRoundStatus == 1">
            <img class="weapon1" :src="processImageUrl(item.weaponsImage)" />
            <img class="weapon2" :src="processImageUrl(item.weaponsImage)" />
            <img class="weapon3" :src="processImageUrl(item.weaponsImage)" />
          </div>
          <div class="account-item-type2" v-else></div>
        </template>
      </div>
    </template>
    <!-- <template v-if="props.gameStatus == 2"></template> -->
    <div class="account-container-items">
    
      <div class="account-container-item" >
         <div class="battle-tabs">
            <div
            class="battle-tab"
            v-for="(tab, index) in tabs"
            :key="tab.name"
            :class="{ active: activeTab === index }"
            @click="handleClickTab(index)"
              >
            {{ tab.name }}
             </div>
           </div>
          <div style="width: 90px;height: 48px;border-radius: 8px;border: 2px solid rgba(255, 102, 25, 1);display: flex;justify-content: center;align-items: center;font-size: 18px;margin-left: 10px;">demo</div>
      </div>

      <div class="account-item-info">
        <div  class="account-item-name" style="display: flex;justify-content: center;align-items: center;">
          <div ><img src="../../../../static/img/set/coinx.png" alt="" style="width: 10px;width: 10px;margin-right: 10px;" /></div>
          <div class="account-item-race">48.46</div>
        </div>
        <div class="account-item-balance-icon">打开盒子</div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, onMounted, toRefs } from "vue";
import { processImageUrl } from "@/utils";
import { useTabs } from "../../services/useTabs";
import { useBattleList } from "../../services/useBattleList";
export default defineComponent({
  setup(props, { emit }) {
    const { tabs, activeTab } = useTabs();
	const battleListInfo = useBattleList();
    // 创建一个响应式状态对象
    const state = reactive({
      loading: false,
    });
 
    // onMounted(() => {});

    return {
      ...toRefs(state),
      processImageUrl,
      props,
      tabs,
      activeTab,
 

	  handleClickTab(index: number) {
        if (index === activeTab.value) return;
        activeTab.value = index;
        battleListInfo.getRoomList(tabs[index].value);
      },
    };
  },
  components: {},

  props: {
    gameStatus: {
      type: Number,
      default: () => 0,
    },
    gameRoundStatus: {
      type: Number,
      default: () => 0,
    },
    gameResult: {
      type: Object,
      default: () => null,
    },
    accounts: {
      type: Array,
      default: () => [],
    },
  },
});
</script>

<style scope lang="scss">
@import "@/views/unpack/components/CreateBattle/AccountContainer.scss";
</style>
